<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
    <link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/libs/css/style.css">
    <link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
    <link rel="stylesheet" href="assets/vendor/charts/chartist-bundle/chartist.css">
    <link rel="stylesheet" href="assets/vendor/charts/morris-bundle/morris.css">
    <link rel="stylesheet" href="assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendor/charts/c3charts/c3.css">
    <link rel="stylesheet" href="assets/vendor/fonts/flag-icon-css/flag-icon.min.css">

    <title>基于SM2的签密密码系统</title>
</head>

<body class="bg-dark" background="./assets/background/3.jpg"
    style="background-repeat: no-repeat;background-size:cover;background-attachment: fixed;">
    <!-- ============================================================== -->
    <div class="dashboard-main-wrapper ">
        <h1 class="text-white text-center display-4">基于SM2的签密密码系统</h1>
        <!-- wrapper  -->
        <!-- ============================================================== -->
        <div class="influence-finder">
            <div class="container-fluid dashboard-content ">
                <div class="card-deck mx-3 px-3">
                    <div class="card" style="opacity: 1;">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-10">
                                    <div class="progress m-t-20">
                                        <div id="server_bar" class="progress-bar progress-bar-striped bg-success"
                                            role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0"
                                            aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-2">
                                    <button class="btn btn-space btn-dark" id="init_server">建立通信</button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-8">
                                    <div class=""
                                        style="background:url('./assets/background/map.png');width:100%;height:350px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                                            style="width:100%;height:350px;">
                                            <!-- <circle cx="100" cy="50" r="40" stroke="black"
                                            stroke-width="2" fill="red" /> -->
                                            <image xlink:href="./assets/background/dimianzhan.png" x="10%" y="10%"
                                                height="100px" width="100px" />
                                            <text x="10%" y="40%" style="fill:red;">
                                                控制台
                                            </text>
                                            <image xlink:href="./assets/background/wurenji.png" x="80%" y="10%"
                                                height="100px" width="100px" />
                                            <text x="80%" y="40%" style="fill:red;">
                                                无人机B
                                            </text>
                                            <image xlink:href="./assets/background/dimianzhan2.png" x="10%" y="70%"
                                                height="100px" width="100px" />
                                            <text x="10%" y="99%" style="fill:red;">
                                                地面站
                                            </text>
                                            <image xlink:href="./assets/background/gongjizhe.png" x="80%" y="70%"
                                                height="100px" width="100px" />
                                            <text x="80%" y="99%" style="fill:red;">
                                                攻击者
                                            </text>
                                            <!-- interface - pcb -->
                                            <g id="ib">
                                                <line x1="20%" y1="20%" x2="75%" y2="20%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" id="ib1" />
                                                <line x1="73%" y1="18%" x2="75%" y2="20%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" id="ib2" />
                                            </g>

                                            <g id="bi">
                                                <line x1="20%" y1="30%" x2="75%" y2="30%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="20%" y1="30%" x2="22%" y2="32%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <!-- interface - pca -->
                                            <g id="ia">
                                                <line x1="12%" y1="45%" x2="12%" y2="70%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="11%" y1="68%" x2="12%" y2="70%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <g id="ai">
                                                <line x1="17%" y1="45%" x2="17%" y2="70%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="17%" y1="45%" x2="18%" y2="47%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>

                                            <!-- interface - attacker -->
                                            <g id="it">
                                                <line x1="21%" y1="35%" x2="79%" y2="75%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="77%" y1="71%" x2="79%" y2="75%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <g id="ti">
                                                <line x1="20%" y1="40%" x2="78%" y2="80%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="20%" y1="40%" x2="22%" y2="44%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <!-- pca - pcb -->
                                            <g id="ab">
                                                <line x1="20%" y1="75%" x2="78%" y2="35%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="76%" y1="39%" x2="78%" y2="35%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <g id="ba">
                                                <line x1="21%" y1="80%" x2="79%" y2="40%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="21%" y1="80%" x2="23%" y2="81%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <!-- pca-attacker -->
                                            <g id="at">
                                                <line x1="20%" y1="90%" x2="75%" y2="90%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="73%" y1="88%" x2="75%" y2="90%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>
                                            <!-- attacker-pcb -->
                                            <g id="tb">
                                                <line x1="85%" y1="70%" x2="85%" y2="45%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                                <line x1="86%" y1="47%" x2="85%" y2="45%"
                                                    style="stroke:rgb(99,99,99);stroke-width:3" />
                                            </g>


                                        </svg>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <img src="./assets/background/controlor.png" alt=""
                                        style="width:100%;height:350px;">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card-deck m-3 px-3">
                    <!-- ============================================================== -->
                    <!-- search bar  -->
                    <!-- ============================================================== -->
                    <div class="card" style="opacity: 1;">
                        <div class="card-header bg-dark text-center p-3 ">
                            <h4 class="mb-1 text-white"><span class="fas fa-user"></span>发送者</h4>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1"
                                                class="d-flex justify-content-center">私钥</label>
                                            <textarea class="form-control" id="a_private_key" rows="3"
                                                value="128B2FA8BD433C6C068C8D803DFF79792A519A55171B1B650C23661D15897263">128B2FA8BD433C6C068C8D803DFF79792A519A55171B1B650C23661D15897263</textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1"
                                                class="d-flex justify-content-center">公钥</label>
                                            <textarea class="form-control" id="a_public_key" rows="3"
                                                readonly></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <form>
                                <div class="form-row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="message" class="d-flex justify-content-center">明文</label>
                                            <textarea class="form-control" id="a_unsign_message" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="sign_message" class="d-flex justify-content-center">密文</label>
                                            <textarea class="form-control" id="a_sign_message" rows="3"
                                                readonly></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        <!-- </div>

                        <div class="card-body px-5 mx-5"> -->
                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <th scope="row">是否成功</th>
                                        <td class="text-left">
                                            <span id="a_sign_flag" class="badge badge-success"></span>

                                            <!-- <div class="switch-button switch-button-success">
                                                <input type="checkbox" value=false name="switch16" id="a_sign_flag" readonly><span>
                                                    <label for="a_sign_flag"></label></span>
                                            </div> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">签密时间（us）</th>
                                        <td><span id="a_sign_time" class="badge badge-success"></span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">发送者ID</th>
                                        <td class="text-left"><span>用户A</span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">接收者ID</th>
                                        <td class="text-left"><span>用户B</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer d-flex text-muted justify-content-around">
                            <button class="btn btn-space btn-dark mb-2" id="a_gen_key">秘钥分发</button>
                            <button class="btn btn-space btn-dark mb-2" id="a_encrypt">签密</button>
                            <button class="btn btn-space btn-dark mb-2" id="a_send">发送</button>

                            <!-- <button class="btn btn-space btn-dark mb-2">Cancel</button> -->
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header bg-dark text-center p-3 ">
                            <h4 class="mb-0 text-white"><span class="fas fa-user"></span>接收者</h4>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="form-row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1"
                                                class="d-flex justify-content-center">私钥</label>
                                            <textarea class="form-control" id="b_private_key" rows="3"
                                                placeholder="128B2FA8BD433C6C068C8D803DFF79792A519A55171B1B650C23661D15897263">128B2FA8BD433C6C068C8D803DFF79792A519A55171B1B650C23661D15897263</textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="exampleFormControlTextarea1"
                                                class="d-flex justify-content-center">公钥</label>
                                            <textarea class="form-control" id="b_public_key" rows="3"
                                                readonly></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <form>
                                <div class="form-row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="receive_message"
                                                class="d-flex justify-content-center">密文</label>
                                            <textarea class="form-control" id="b_sign_message" rows="3"
                                                readonly></textarea>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="unsign_message" class="d-flex justify-content-center">明文</label>
                                            <textarea class="form-control" id="b_unsign_message" rows="3"
                                                readonly></textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        <!-- </div>
                        <div class="card-body px-5 mx-5"> -->
                            <table class="table table-hover ">
                                <tbody>
                                    <tr>
                                        <th scope="row">是否解签密</th>
                                        <td>
                                            <span id="b_is_unsign" class="badge badge-success"></span>

                                            <!-- <div class="switch-button switch-button-success">
                                                <input type="checkbox" value=false name="switch16"
                                                    id="b_is_unsign" readonly><span>
                                                    <label for="b_is_unsign"></label></span>
                                            </div> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">是否被篡改</th>
                                        <td>
                                            <span id="b_is_tamper" class="badge badge-success"></span>

                                            <!-- <div class="switch-button switch-button-success">
                                                <input type="checkbox" value=false name="switch16"
                                                    id="b_is_tamper" readonly><span>
                                                    <label for="b_is_tamper"></label></span>
                                            </div> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">是否被重放：</th>
                                        <td>
                                            <span id="b_is_replay" class="badge badge-success"></span>
                                            <!-- <div class="switch-button switch-button-success">
                                                <input type="checkbox" value=false name="switch16"
                                                    id="b_is_replay" disable><span>
                                                    <label for="b_is_replay"></label></span>
                                            </div> -->
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">解密时间（us）</th>
                                        <td><span id="b_unsign_time" class="badge badge-success"></span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">时间戳</th>
                                        <td><span id="b_unsign_timestamp"></span></td>
                                    </tr>
                                    <!-- <tr>
                                        <th scope="row">发送者ID</th>
                                        <td><span>用户A</span></td>
                                    </tr>
                                    <tr>
                                        <th scope="row">接收者ID</th>
                                        <td><span>用户B</span></td>
                                    </tr> -->
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer d-flex text-muted justify-content-around">
                            <button class="btn btn-space btn-dark mb-2" id="b_gen_key">秘钥分发</button>
                            <button class="btn btn-space btn-dark mb-2" id="b_receive">接收</button>
                            <button class="btn btn-space btn-dark mb-2" id="b_unsign">解密</button>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- end search bar  -->
                </div>
                <div class="row m-3 p-3">
                    <!-- ============================================================== -->
                    <!-- search bar  -->
                    <!-- ============================================================== -->
                    <div class="col-3"></div>
                    <div class="col-6">

                        <div class="card">
                            <div class="card-header bg-dark text-center p-3 ">
                                <h4 class="mb-0 text-white">篡改攻击者</h4>
                            </div>
                            <div class="card-body p-1">
                                <form class="m-3">
                                    <div class="form-group row">
                                        <label for="intercept_message1" class="col-2 col-form-label">截获密文</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="c_sign_message" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="tamper_message" class="col-2 col-form-label">篡改密文</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="c_tamper_message" readonly>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="replay_message" class="col-2 col-form-label">重放信息</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="d_replay_message" readonly>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputPassword3" class="col-2 col-form-label">发送者</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control-plaintext" readonly value="用户A">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputPassword3" class="col-2 col-form-label">接收者</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control-plaintext" readonly value="用户B">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer d-flex text-muted justify-content-around">
                                <button class="btn btn-space btn-dark mb-2" id="c_intercept">截获</button>
                                <button class="btn btn-space btn-dark mb-2" id="c_tamper">篡改</button>
                                <button class="btn btn-space btn-dark mb-2" id="c_replay">重放</button>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="card">
                        <div class="card-header bg-dark text-center p-3 ">
                            <h4 class="mb-0 text-white">重放攻击者</h4>
                        </div>
                        <div class="card-body p-1">
                            <form class="m-3">
                                <div class="form-group row">
                                    <label for="intercept_message2" class="col-2 col-form-label">截获密文</label>
                                    <div class="col-sm-10">
                                        <input type="email" class="form-control" id="d_sign_message" readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="replay_message" class="col-2 col-form-label">重放信息</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="d_replay_message" readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-2 col-form-label">发送者</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control-plaintext" readonly value="用户A">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="inputPassword3" class="col-2 col-form-label">接收者</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control-plaintext" readonly value="用户B">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer d-flex text-muted d-flex justify-content-around">
                            <button class="btn btn-space btn-dark mb-2" id="d_intercept">截获</button>
                            <button class="btn btn-space btn-dark mb-2" id="d_send">发送</button>
                        </div>
                    </div> -->
                    <!-- ============================================================== -->
                    <!-- end search bar  -->
                </div>
                <div class="text-center invisible collapse" id="progress">
                    <p class="dashboard-spinner spinner-danger spinner-md"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框，用来显示反馈的消息 -->
    <div class="modal fade" id="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_title">Modal Title</h5>
                </div>
                <div class="modal-body">
                    <span id="modal_content">Modal body text goes here.</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Optional JavaScript -->
    <!-- Insert this line above script imports  -->
    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
    <!-- jquery 3.3.1 -->
    <script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
    <!-- bootstap bundle js -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <!-- slimscroll js -->
    <script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
    <!-- main js -->
    <script src="assets/libs/js/main-js.js"></script>
    <!-- chart chartist js -->
    <script src="assets/vendor/charts/chartist-bundle/chartist.min.js"></script>
    <!-- sparkline js -->
    <script src="assets/vendor/charts/sparkline/jquery.sparkline.js"></script>
    <!-- morris js -->
    <script src="assets/vendor/charts/morris-bundle/raphael.min.js"></script>
    <script src="assets/vendor/charts/morris-bundle/morris.js"></script>
    <!-- chart c3 js -->
    <script src="assets/vendor/charts/c3charts/c3.min.js"></script>
    <script src="assets/vendor/charts/c3charts/d3-5.4.0.min.js"></script>
    <script src="assets/vendor/charts/c3charts/C3chartjs.js"></script>
    <script src="assets/libs/js/dashboard-ecommerce.js"></script>

    <script type="text/javascript" src="index.js"></script>
    <!-- Insert this line after script imports -->
    <script>if (window.module) module = window.module;</script>
</body>



</html>